<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0;padding:0;}
			body{overflow:hidden;}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
	</body>
</html>
<script type="text/javascript">
	window.onload = function(){
		var W = document.documentElement.clientWidth || document.body.clientWidth;
		var H = document.documentElement.clientHeight || document.body.clientHeight;
		var oCanvas = document.getElementById("canvas"),
			context = oCanvas.getContext("2d");
		oCanvas.width = W;
		oCanvas.height = H;
		
		var fps,
			background = new Image();
//		var backgroundOffset = 0;							//------------------基于时间运动设置偏移量  （暂不懂）
		var lastFrameTime = 0;	//仅用于fps获取	
		var OFFSETLEFT = 3;
		function draw(now){
//			setBackgroundOffset(now);						//------------------基于时间运动设置偏移量  （暂不懂）


			context.translate(-OFFSETLEFT,0)
			context.drawImage(background,0,0);
			context.drawImage(background,background.width,0);
		}
		function animate(now){
			fps = getFps(now);
			draw(now);
			requestAnimationFrame(animate);
		}
		function getFps(now){
			fps = 1 / (now-lastFrameTime)*1000;
			lastFrameTime = now;
			return fps;
		}
		function startGame(){
			requestAnimationFrame(animate);
		}
		function initGame(){
			background.src = "../img/bg.jpg";
			background.onload = function(){
				startGame();
			};
		}
//		var BACKGROUND_VELOCITY = 250,									//------------------基于时间运动设置偏移量  （暂不懂）
//			bgVelocity = BACKGROUND_VELOCITY;
//			function setBackgroundOffset(now){
//				backgroundOffset += bgVelocity * (now - lastFrameTime) / 1000;
//				if(backgroundOffset<0 || backgroundOffset>background.width){
//					backgroundOffset = 0;
//				}
//			}
		initGame();
	}
</script>